<template>
  <div style="background-color: #f4f4f7; height: 100vh">
    <!-- 添加孩子页面 -->
    <van-nav-bar title="添加孩子" @click-left="$router.push('/')">
      <van-icon
        name="arrow-left"
        slot="left"
        color="black"
        style="font-size: 1.2rem"
      />
    </van-nav-bar>
    <div class="t-form">
      <div class="t-border">
        <!-- 姓名 -->
        <van-field
          v-model="name"
          label="姓名"
          placeholder="请填写孩子姓名"
          input-align="right"
        />

        <!-- 性别 -->
        <van-field
          input-align="right"
          readonly
          clickable
          name="Sex"
          :value="value1"
          label="性别"
          placeholder="请选择性别"
          @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="sex"
            @confirm="onConfirm1"
            @cancel="showPicker1 = false"
          />
        </van-popup>

        <!-- 地区 -->
        <van-field
          input-align="right"
          readonly
          clickable
          name="Area"
          :value="value2"
          label="所在地区"
          placeholder="请选择所在地区"
          @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker
            show-toolbar
            :columns="area"
            @confirm="onConfirm2"
            @cancel="showPicker2 = false"
          />
        </van-popup>

        <!-- 学校 -->
        <van-field
          input-align="right"
          v-model="school"
          label="所在学校"
          placeholder="请填写所在学校"
        />

        <!-- 年级 -->
        <van-field
          input-align="right"
          readonly
          clickable
          name="Grade"
          :value="value3"
          label="所在年级"
          placeholder="请选择年级"
          @click="showPicker3 = true"
        />
        <van-popup v-model="showPicker3" position="bottom">
          <van-picker
            show-toolbar
            :columns="grade"
            @confirm="onConfirm3"
            @cancel="showPicker3 = false"
          />
        </van-popup>

        <!-- 班级 -->
        <van-field
          input-align="right"
          readonly
          clickable
          name="CLASS"
          :value="value4"
          label="所在班级"
          placeholder="请选择班级"
          @click="showPicker4 = true"
        />
        <van-popup v-model="showPicker4" position="bottom">
          <van-picker
            show-toolbar
            :columns="Class"
            @confirm="onConfirm4"
            @cancel="showPicker4 = false"
          />
        </van-popup>
      </div>
      <van-button round size="large">保存</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //姓名
      name: "",

      // 性别
      sex: ["男", "女"],
      showPicker1: false,
      value1: "",

      // 地区
      area: [
        "莲湖区",
        "碑林区",
        "雁塔区",
        "新城区",
        "未央区",
        "长安区",
        "灞桥区",
        "阎良区",
        "临潼区",
        "高陵区",
        "鄠邑区",
        "蓝田县",
        "周至县",
      ],
      showPicker2: false,
      value2: "",

      // 学校
      school: "",

      //年级
      grade: [
        "初三",
        "初二",
        "初一",
        "六年级",
        "五年级",
        "四年级",
        "三年级",
        "二年级",
        "一年级",
      ],
      showPicker3: false,
      value3: "",

      // 班级
      Class: [
        "1班",
        "2班",
        "3班",
        "4班",
        "5班",
        "6班",
        "7班",
        "8班",
        "9班",
        "10班",
        "11班",
        "12班",
        "13班",
        "14班",
        "15班",
        "16班",
        "17班",
        "18班",
        "19班",
        "20班",
      ],
      showPicker4: false,
      value4: "",
    }
  },

  methods: {
    // 性别
    onConfirm1(value) {
      this.value1 = value
      this.showPicker1 = false
    },

    //地区
    onConfirm2(value) {
      this.value2 = value
      this.showPicker2 = false
    },

    //年级
    onConfirm3(value) {
      this.value3 = value
      this.showPicker3 = false
    },

    //班级
    onConfirm4(value) {
      this.value4 = value
      this.showPicker4 = false
    },
  },
}
</script>

<style lang="scss" scoped>
.t-form {
  margin: 3% 5%;
}
.t-border {
  padding: 1%;
  border-radius: 10px;
  background-color: #fff;
}
.van-button {
  background-color: #6c81f0;
  color: #fff;
  font-size: 1.1rem;
  margin-top: 41vh;
}
</style>
